<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#main {
				border: 1px solid red;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="main" style="width: 1000px; height: 500px"></div>
		<script type="module">
			import {
				Grender,
				Circle,
				Rect,
				Polygon,
				Layer,
				Group
			} from "../lib/index.js";
			const grender = new Grender(document.getElementById("main"), {});
			const layer = new Layer();
			const group = new Group();
			const circle = new Circle({
				shape: { x: 90, y: 90, r: 40 },
				style: {
					fillStyle: "pink",
				},
				draggable: true,
			});
			
			group.add(circle);
			circle.on("click",(e)=>{
				console.log(e);
			})
			group.on("click",(e)=>{
				console.log(e)
			})
			layer.add(group);
			
			grender.add(layer)
			grender.refresh()
		</script>
	</body>
</html>
